import style from './css/Registeredpersons.module.scss'
import { useState } from 'react'
import { DatePicker } from 'antd'
import * as echarts from 'echarts';
import { MutableRefObject, useEffect, useRef } from 'react';
import dayjs from 'dayjs';
function Registeredpersons() {
    const { RangePicker } = DatePicker;
    const dateFormat = 'YYYY-MM-DD';
    const [date, setDate] = useState(null);
    const onDateChange = (value: any, dateString: any) => {
        setDate(value); // 设置日期状态
        console.log(dateString)
    };
    // 挂号人数趋势echarts图表
    const demoRef: MutableRefObject<any> = useRef()
    const charInit = (): void => {
        const myChart: echarts.EChartsType = echarts.init(demoRef.current)
        myChart.setOption({
            grid: {
                left: '3%',
                right: '4%',
                top: '8%',
                bottom: '10%',
                containLabel: true
            },
            legend: {
                bottom: '0%',
                itemWidth: 15,
                itemHeight: 5,
                icon: 'roundRect',
                itemStyle: {
                    color: 'rgba(4, 104, 255, 1)'
                },
                textStyle: {
                    fontSize: 13,
                    color: '#c2c2c2'
                }
            },
            xAxis: {
                type: 'category',
                data: ['6-1', '6-3', '6-6', '6-9', '6-12', '6-15', '6-18', '6-21', '6-24', '6-30'],
                axisTick: {
                    alignWithLabel: true
                },
                boundaryGap: false,
            },
            yAxis: {
                type: 'value',
                interval: 50,
                max: 200
            },
            series: [
                {
                    data: [80, 110, 90, 125, 175, 125, 90, 126, 160, 130],
                    smooth: true,
                    symbol: "none", // 去掉圆点
                    areaStyle: {
                        color: '#e6f0ff'
                    },
                    emphasis: {
                        areaStyle: {
                            color: '#cde1ff' // 选中时的区域填充样式和颜色
                        }
                    },
                    type: 'line',
                    name: '挂号人数'
                }
            ]
        })
    }
    useEffect(() => {
        charInit()
    }, [])
    return (
        <>
            <div className={style.persons}>
                <div className={style.sortname}>
                    <span>挂号人数趋势</span>
                    <RangePicker
                        value={date}
                        defaultValue={[dayjs('2024-06-01', dateFormat), dayjs('2024-06-30', dateFormat)]}
                        onChange={onDateChange}
                        placeholder={['开始日期', '结束日期']}
                    >
                    </RangePicker>
                </div>
                <div ref={demoRef} style={{ width: '826px', height: '334px' }}></div>
            </div>
        </>
    );
}

export default Registeredpersons;